<template>
  <transition name="slide-fade">
    <div style="height: 100%">
      <img src="../assets/imgs/indexBg1.jpg" alt="">
      <el-container>
        <el-header>您本局的指令是：&nbsp; <span style="color: #e6a23c">{{code}}</span></el-header>

        <div style="line-height: 4em;text-align: center;color: #dfe4ed">
          第{{num}}轮
        </div>
        <div class="gameInfo" v-if="players.length>0">
          <div v-for="(player,index) in players">
            <div v-if="player.identity == 'normal'">
              <span>
                {{player.nickname}}(平民)
              </span>
                被淘汰
            </div>
            <div v-if="player.identity == 'white'" style="color:lightgreen">
              <span>
                {{player.nickname}}(白板)
              </span>
              被淘汰
            </div>
            <div v-if="player.identity == 'spy'" style="color: orangered">
              <span>
                {{player.nickname}}(卧底)
              </span>
              被淘汰
            </div>

          </div>

        </div>
          <div class="btnBox" @click="poll()" v-if="inArray(outPlayers,player_id)">
            {{btnText}}
          </div>

      </el-container>
    </div>

  </transition>
</template>

<script>
  export default {
    name: 'prepare',
    data:()=>({
      num: 1,
      players:[],
      outPlayers:[],
      player_id:'',
      ratio:0,
      btnText:'去抓卧底',
      time:function () {

      },
      resultTime:function () {

      }
    }) ,
    mounted(){
      if (window.history && window.history.pushState) {
        history.pushState(null, null, null,null,null);
        window.addEventListener('popstate', this.goBack, false);
      }

    },
    methods:{
      goBack(){
        // 禁止回退
        history.pushState(null, null, null,null,null);
        return false
      },
      poll(){
        // 点击投票按钮
        this.$axios.post(this.urlList.authUrl + '/api/game/do_prepare',{
          token:window.localStorage.getItem('token'),
          room_id:this.room_id
        }).then((res)=>{
          if(res.data.error == 200){
            this.btnText = '和小伙伴一起'
          }
        })
      },
      doPoll(){
        // 查询是否能够去投票页面
        this.$axios.post(this.urlList.authUrl + '/api/game/get_prepare_ratio',{room_id:this.room_id}).then((res)=>{
          this.ratio = res.data.data.ratio
          if(res.data.data.ratio >= 50){
            window.localStorage.setItem('num',this.num+1)

            this.$router.push({name:'poll',params:{room_id:this.room_id,player_id:this.player_id}})
          }
        })
      },
      inArray(arr,option){
        if(arr.indexOf(option) == -1){
          return true
        }else{
          return false
        }
      },
      getGameInfo(){
        this.$axios.post(this.urlList.authUrl + '/api/game/get_progress',{room_id:this.room_id}).then((res)=>{
          if(res.data.error == 200){
            // 平民冤死，游戏继续
            this.players = res.data.data.member
            if(this.players){
              for(let k in this.players){
                this.outPlayers.push(this.players[k].player_id.toString())
              }
            }

          }else if(res.data.error == 201){
            // 平民胜利
            this.players = res.data.data.member
            clearInterval(this.time)
            clearInterval(this.resultTime)

            for(let k in this.players){
              this.outPlayers.push(this.players[k].player_id.toString())
            }
            alert('平民胜利')
            let that = this;
            setTimeout(function () {
              window.localStorage.removeItem('num')
              that.$router.replace({name:'result'})
            },1000)

          }else if(res.data.error == 202){
            // 卧底胜利
            this.players = res.data.data.member
            for(let k in this.players){
              this.outPlayers.push(this.players[k].player_id.toString())
            }
            clearInterval(this.time)
            clearInterval(this.resultTime)
            alert('卧底胜利')
            let that = this;
            setTimeout(function () {
              window.localStorage.removeItem('num')
              that.$router.replace({name:'result'})
            },1000)
          }
        })
      },
      changeStyle(){
        let style = {}
        console.log(this.ratio)
        style['width'] = 100 + this.ratio/100 + 16 + 'px'
        style['height'] = 100 + this.ratio/100 + 16 + 'px'
        style['z-index'] = '1'
        style['marginLeft'] = -50 - this.ratio/200 -8  + 'px'
        style['marginTop'] = -50 - this.ratio/200 -8 + 'px'

        return style
      }
    },
    created(){
      this.room_id = this.$route.params.room_id || window.localStorage.getItem('room_id');
      this.player_id = this.$route.params.player_id || window.localStorage.getItem('player_id')
      this.code = window.localStorage.getItem('code')
      this.num = Number(window.localStorage.getItem('num'))  || 1

      // 循环查询
      this.time = setInterval(this.doPoll,1000)
      this.resultTime = setInterval(this.getGameInfo,1000)
      // this.$axios.post(this.urlList.authUrl + '/api/game/get_subject',{
      //   token:window.localStorage.getItem('token'),
      //   room_id:this.room_id,
      //   player_id:this.player_id
      // }).then((res)=>{
      //   console.log(res)
      //   this.code = res.data.data.word
      // })
    },
    //离开当前页面后执行
    destroyed: function () {
      console.log('我离开了！')

      clearInterval(this.time)
      clearInterval(this.resultTime)
    },
  }
</script>

<style scoped>
  .el-container.is-vertical{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }
  .el-header {
    background:url('../assets/imgs/topBG.jpg') no-repeat;
    background-size:cover;
    background-position:bottom right;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
  img{
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .gameInfo{
    color: snow;
    text-shadow: 2px 3px 2px #333;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
  }
  .btnBox{
    font-weight: 700;
    width: 100px;
    height: 100px;
    font-size: 14px;
    margin: auto;
    background: #67c23a;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    color: #dfe4ed;
  }
  .red{
    background: none;
    border:1px solid #c2e7b0;
  }
</style>
